<template>
    <van-tabs
      v-model="currentShowDate"
      :ellipsis="false"
      color="#ff5f16"
      title-active-color="#ff5f16"
      @click="changeTab()"
    >
      <van-tab
        v-for="date in showDates"
        :title="showDateFormat(date)"
        :key="date"
        :name="date"
      >
        <cinemaFooter
          v-for="obj in schedules"
          :key="obj.scheduleId"
          :schedule="obj"
        />
      </van-tab>
    </van-tabs>
  </template>
  
  <script>
  import dayjs from "dayjs";
  import "dayjs/locale/zh-cn";
  dayjs.locale("zh-cn");
  import calendar from "dayjs/plugin/calendar";
  dayjs.extend(calendar);
  import cinemaFooter from "./cinema-footer.vue";
  
  
  export default {
    props: {
      showDates: {
        type: Array,
        default: () => [],
      },
    },
    components: {
        cinemaFooter,
    },
    data() {
      return {
        currentShowDate: Number(this.$route.params.showDate), 
        schedules: {},
        mockData: {
          status: 0,
          data: {
            schedules: [
            {
             advanceStopMins : 15,
             endAt : 1703053200,
             filmLanguage : "原声",
             hallName : "1号激光厅",
             imagery :  "3D" ,
             isOnsell : true,
             marketPrice : 5000,
             maxSalePrice : 2590,
             minSalePrice : 2590,
             salePrice : 2590,
             scheduleId : 400658610,
             showAt : 1703045700
            },
            {
              advanceStopMins : 15,
              endAt : 1703055900,
              filmLanguage : "原声",
              hallName : "6号激光巨幕厅",
              imagery :  "3D" ,
              isOnsell : true,
              marketPrice : 5000,
              maxSalePrice : 2590,
              minSalePrice : 2590,
              salePrice : 2590,
              scheduleId : 401057524,
              showAt : 1703048400
            },
            {
             advanceStopMins : 15,
             endAt : 1703058900,
             filmLanguage : "原声",
             hallName :  "5号激光厅" ,
             imagery :  "3D" ,
             isOnsell : true,
             marketPrice : 5000,
             maxSalePrice : 2590,
             minSalePrice : 2590,
             salePrice : 2590,
             scheduleId : 401407564,
             showAt : 1703051400
            },
            {
            advanceStopMins : 15,
            endAt : 1703061300,
            filmLanguage :  "原声" ,
            hallName :  "1号激光厅" ,
            imagery :  "3D" ,
            isOnsell : true,
            marketPrice : 5000,
            maxSalePrice : 2590,
            minSalePrice : 2590,
            salePrice : 2590,
            scheduleId : 398341590,
            showAt : 1703053800
            },
            ],
          },
          msg: "表示成功",
        },
      }
    },
    created() {
      this.getSchedules();
    },
    methods: {
      showDateFormat(showDate) {
        let dateStr = dayjs(showDate * 1000).calendar(null, {
          lastDay: "[昨天]",
          sameDay: "[今天] M月D日",
          nextDay: "[明天] M月D日",
          sameElse: "[周]dd M月D日",
          nextWeek: "[周]dd M月D日",
          lastWeek: "[周]dd M月D日",
        })
        return dateStr;
      },
      async getSchedules() {
        let res = await this.$api({
          headers: {
            "X-Host": "mall.film-ticket.schedule.list",
          },
          method: "get",
          url: "https://m.maizuo.com/gateway",
          params: {
            filmId: this.$route.params.filmId,
            cityId: this.$store.state.cityId,
            date: this.currentShowDate,
          },
        })
        console.log("res", res);
        this.schedules = this.mockData.data.schedules;
      },
      changeTab() {
        this.getSchedules();
        let cinemaId = this.$route.params.cinemaId;
        let filmId = this.$route.params.filmId;
        this.$router.replace(
          `/cinema/${cinemaId}/film/${filmId}/${this.currentShowDate}`
        );
      },
    },
  }
  </script>
  
  <style>
  </style>